<template>
    <div class="contain">
        <div class="input_modal">
            <div class="header">
            <el-button class="link" type="primary" >
                 <router-link  to="/voteEdit" style="color: #fff;">新增投票</router-link>
            </el-button>
        </div>
        <div class="input-item">
            <el-input v-model="searchWord" placeholder="请输入投票主题ID" class="proName"  @keyup.enter.native="search"></el-input>
            <el-button type="primary" @click="getVoteList">查询投票</el-button>
        </div>
        </div>
        <div class="table_con">
            <el-table :data="tableData" stripe style="width: 100%;margin-top: 40px">
                <el-table-column prop="voteId" label="投票主题ID">
                </el-table-column>
                <el-table-column prop="creator" label="创建者" width="200">
                </el-table-column>
                <el-table-column prop="voteAssetCode" label="投票代币名称" width="200">
                </el-table-column>
                <el-table-column prop="voteTitle" label="投票主题" width="200">
                </el-table-column>
                <el-table-column prop="voteStartTime" label="投票开始日期" width="200">
                </el-table-column>
                <el-table-column prop="voteEndTime" label="投票截止日期" width="200">
                </el-table-column>
                <el-table-column  prop="voteStatus" label="状态">
                      <template slot-scope="scope">
                         <span>{{ scope.row.voteStatus | formatStatus }}</span>
                      </template>
                  </el-table-column>
                <el-table-column prop="" label="操作" width=300>
                  <template slot-scope="scope">
                    <el-button type="primary" plain size="mini" @click="linkToDetail(scope.row.voteId)">查看</el-button>
                    <el-button type="primary" plain size="mini" @click="modify(scope.row.voteId)">修改</el-button>
                    <el-button type="danger" plain size="mini" @click="deleteInfo(tableData[scope.$index].voteId)">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="pagination">
            <el-pagination   @size-change="handleSizeChange"  @current-change="handleCurrentChange"       
                :current-page.sync="pageIndex"              
                :page-size="pageSize"   
                :page-sizes='[10,20,30,40]'    
                layout="sizes, prev, pager, next"       
                :total="pageCount">     
            </el-pagination>
        </div>
    </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    var validateNumber = (rules, value, callback) => {
      if (isNaN(value)) {
        callback(new Error("请输入数字值!"));
      } else {
        callback();
      }
    };
    
    return {
      searchWord:'',
      voteId: "",
      creator: "",
      voteAssetCode: "",
      voteAssetCode: "",
      voteTitle:'',
      voteStartTime:'',
      voteEndTime:'',
      voteStatus:'',
      tableData: [],
      pageCount: null,
      pageIndex: 1,
      pageSize: 10,
      loading: true,
      dialogVisible: false,
      dialogTitle: "操作提示",
      dialogImageUrl: "",
      information: {
        
      },
      rules: {

      }
    };
  },
  mounted() {
    this.getVoteList();
  },
  methods: {
    getVoteList: function() {
      let url = CONSTANT.URL.VOTE.FINDVOTEBYPAGE;
      let dataForm = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      };
      let data = {
        // searchWord:this.searchWord,
      };
      if (this.searchWord != "") {
        data.searchWord = this.searchWord;
      }

      let param = JSON.stringify(data);
      this.loading = true;
      common.requestAjax(url, param, dataForm, res => {
        this.loading = false;
        let data = res.data;
        this.tableData = data.bussData;
        this.pageCount = data.pageCount * this.pageSize;
      });
    },
    modify(id){
      this.$router.push({path:'/voteEdit', query:{'id':id}});
    },
    search: function(e) {
      if (e.keyCode == 13) {
        this.getVoteList(1);
        this.pageIndex = 1;
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getVoteList(this.pageIndex);
    },
    handleCurrentChange(val) {
      this.getVoteList(val);
      this.pageIndex = val;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    linkToDetail(id){
      this.$router.push({path:'voteDetail',query:{'id':id}});
    },
    deleteInfo:function(id){
      this.$confirm('确定删除?', '提示', {           
                confirmButtonText: '确定',           
                cancelButtonText: '取消',           
                type: 'warning'         
            }).then(() => {           
                let  url = CONSTANT.URL.VOTE.DELVOTE;
                let param = {voteId:id};
                common.requestAjax(url,param,null,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            type:'success',
                            message:'删除成功!'
                        });
                        this.getVoteList();
                    }
                    else{
                        this.$message({
                            type:'warning',
                            message:res.msg
                        })
                    }
                })      
            }).catch(() => {           
                this.$message({             
                    type: 'danger',             
                    message: '已取消删除'           
                });                   
            });   
    }, 
   
  },
  filters: {
    formatStatus(value){
      var status = [];
            status['NOTSTARTED'] = '未开始';
            status['ONGOING'] = '进行中';
            status['FINISHED'] = '已结束';
            if(value){
                return status[value];
            }
            else{ return '--'};
    },
  }
};
</script>

<style lang="scss" scoped>
.contain {
  .header {
    margin: 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
  }
  .input_modal {
    margin-top: 20px;
    .input-item {
      display: inline-block;
      margin-right: 20px;
      clear: both;
      height: 40px;
      line-height: 40px;
      .el-input,
      .el-button,
      .el-select,
      span {
        float: left;
        margin-right: 10px;
      }
      .proName {
        width: 200px;
      }
    }
  }
  .el-dialog__body {
    // padding:  10px 20px;
    .dialog-con {
      padding: 0px 20px 0px 0px;
      p {
        text-align: center;
        margin: 5px 0px 20px 0px;
        font-size: 14px;
        color: #666;
        span {
          color: #111;
          font-size: 14px;
        }
      }
    }
  }
  .table_con {
    text-align: center;
    // .el-button{
    //     display: inline-block;
    //     width: 104px;
    //     height: 30px;
    //     margin-left: 0;
    //     margin-top: 5px;
    // }
    .el-button:nth-child(3) {
      margin-top: 5px;
    }
  }
  .pagination {
    text-align: right;
    width: 100%;
    margin-top: 60px;
  }
}
</style>
